<!DOCTYPE html>
<html lang="ru" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приложение для отслеживания финансов</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body class="bg-color-primary text-color-white tracking-wider">
    <header class="sticky top-0 z-50 bg-color-primary-dark">
        <nav class="container flex justify-between items-center">
            <div class="py-5 text-color-secondary font-bold text-3xl">
                <a href="#home"><span class="text-color-white">Money</span>Flow</a>
            </div>
            <div class="">
                <ul class="hidden lg:flex items-center space-x-6">
                    <li><a href="#home" class="hover:text-color-secondary ease-in duration-200">Главная</a></li>
                    <li><a href="#features" class="hover:text-color-secondary ease-in duration-200">Преимущества</a></li>
                    <li><a href="#testimonal" class="hover:text-color-secondary ease-in duration-200">Отзывы</a></li>
                    <li><a href="#pricing" class="hover:text-color-secondary ease-in duration-200">Цены</a></li>
                    <li><a href="#blog" class="hover:text-color-secondary ease-in duration-200">Блог</a></li>
                    <li><a href="#contact" class="hover:text-color-secondary ease-in duration-200">Контакты</a></li>
                    <li><button class="btn">Попробовать</button></li>
                </ul>
            </div>
  

    <!-- мобильное меню -->
    <div id="hamburger" class="lg:hidden cursor-pointer z-50">
        <i class="fa-solid fa-bars"></i>
    </div>
    <div id="menu" class="hidden bg-color-primary-dark h-[70vh] absolute inset-0">
        <ul class="h-full grid place-items-center py-20">
            <li><a id="hLink" href="#home" class="hover:text-color-secondary ease-in duration-200">Главная</a></li>
            <li><a id="hLink" href="#features" class="hover:text-color-secondary ease-in duration-200">Преимущества</a></li>
            <li><a id="hLink" href="#testimonal" class="hover:text-color-secondary ease-in duration-200">Отзывы</a></li>
            <li><a id="hLink" href="#pricing" class="hover:text-color-secondary ease-in duration-200">Цены</a></li>
            <li><a id="hLink" href="#blog" class="hover:text-color-secondary ease-in duration-200">Блог</a></li>
            <li><a id="hLink" href="#contact" class="hover:text-color-secondary ease-in duration-200">Контакты</a></li>
            <li><button class="btn">Попробовать</button></li>
        </ul>
    </div>
      </nav>
    </header>
    <main>
        <section id="home" class="relative">
            <div class="blob1"></div>
            <div class="blob2"></div>
            <div class="container py-20">
                <div class="flex flex-col items-center z-20 md:flex-row">
                    <div class="text-center mb-12 md:text-left md:2-1/2 md:pr-10">
                        <h1 class="title mb-4">Приложение для быстрого отслеживания ваших расходов и доходов, а также контроля за своим финансовым положением.</h1>
                        <p class="leading-relaxed mb-10">В бесплатной версии можно вести учёт доходов и расходов в рублях, долларах и евро, добавлять счета, с которых оплачиваются покупки, устанавливать напоминания</p>
                        <button class="btn">Загрузить</button>
                    </div>
                    <div class="md:w-1/2">
                        <img src="./img/hero4.png" alt="#!">
                    </div>
                </div>
            </div>
        </section>
        <section id="features" class="bg-color-primary-light">
            <div class="container py-20">
                <div class="text-center m-auto mb-20 md:w-1/2">
                    <h4 class="font-bold text-color-secondary mb-4">Всё под контролем</h4>
                    <h1 class="title">Легко управляйте финансами, ставьте цели или задавайте лимиты</h1>
                </div>

                <div class="grid lg:grid-cols-3 md:grid-cols-2 gap-12 lg:gap-8 px-4 sm:px-6 lg:px-8">
                    <!-- карточка 1 -->
                    <div class="border-2 border-solid border-color-gray text-center py-20 px-5 rounded-2xl cursor-pointer hover:bg-color-primary-dark ease-in duration-200">
                        <div class="bg-color-secondary inline-block rounded-2xl py-5 px-6">
                            <i class="fa-solid fa-calendar-days"></i>
                        </div>
                        <h3 class="text-xl font-bold py-4">Планирование</h3>
                        <p class="leading-relaxed">Устанавливайте лимиты на расходы, ставьте цели, добавляйте разные счета</p>
                    </div>
                    <!-- карточка 2 -->
                    <div class="border-2 border-solid border-color-gray text-center py-20 px-5 rounded-2xl cursor-pointer hover:bg-color-primary-dark ease-in duration-200">
                        <div class="bg-color-secondary inline-block rounded-2xl py-5 px-6">
                            <i class="fa-solid fa-chart-pie"></i>
                        </div>
                        <h3 class="text-xl font-bold py-4">Подробные отчёты</h3>
                        <p class="leading-relaxed">Смотрите различную статистику доходов и расходов в диаграммах</p>
                    </div>
                    <!-- карточка 3 -->
                    <div class="border-2 border-solid border-color-gray text-center py-20 px-5 rounded-2xl cursor-pointer hover:bg-color-primary-dark ease-in duration-200">
                        <div class="bg-color-secondary inline-block rounded-2xl py-5 px-6">
                            <i class="fa-solid fa-phone"></i>
                        </div>
                        <h3 class="text-xl font-bold py-4">Поддержка 24/7</h3>
                        <p class="leading-relaxed">Если что-то пойдёт не так и вам нужна будет помощь, то мы всегда на связи</p>
                    </div>
                </div>
            </div>
        </section>
        <section id="features" class="bg-color-primary">
            <div class="container pt-10 pb-0">
                <div class="text-center m-auto mb-1.5 md:w-1/2">
                    <h4 class="font-bold text-color-secondary mb-4">Как это работает</h4>
                    <h1 class="title">Три очень простых шага</h1>
                </div>

                <div class="grid lg:grid-cols-3 md:grid-cols-2 gap-12 lg:gap-8 px-4 sm:px-6 lg:px-8 ">
                    <!-- карточка 1 -->
                    <div class="border-color-gray text-center py-20 rounded-2xl">
                        <div class="bg-color-primary-dark inline-block rounded-md py-3 px-5">
                            <h1 class="text-5xl">1</h1>
                        </div>
                        <h3 class="text-xl font-bold py-4">Установите приложении</h3>
                        <p class="leading-relaxed">Доступно для установки на смартфоны iOS и Android</p>
                    </div>
                    <!-- карточка 2 -->
                    <div class="border-color-gray text-center py-20 rounded-2xl">
                        <div class="bg-color-secondary inline-block rounded-md py-3 px-5">
                            <h1 class="text-5xl">2</h1>
                        </div>
                        <h3 class="text-xl font-bold py-4">Создайте профиль</h3>
                        <p class="leading-relaxed">Заполните нужные поля и подтвердите свои данные</p>
                    </div>
                    <!-- карточка 3 -->
                    <div class="border-color-gray text-center py-20 rounded-2xl">
                        <div class="bg-color-primary-dark inline-block rounded-md py-3 px-5">
                            <h1 class="text-5xl">3</h1>
                        </div>
                        <h3 class="text-xl font-bold py-4">Наслаждайтесь возможностями!</h3>
                        <p class="leading-relaxed">В платной версии нет ограничений на количество активов</p>
                    </div>
                </div>
            </div>
        </section>


        <section id="features" class="bg-color-primary-light">
            <div class="container py-20">
                <div class="text-center m-auto mb-20 md:w-1/2">
                    <h4 class="font-bold text-color-secondary mb-4">Прайс</h4>
                    <h1 class="title">Выбирайте тариф для своих целей</h1>
                </div>

                <div class="grid lg:grid-cols-3 md:grid-cols-2 gap-12 lg:gap-8 px-4 sm:px-6 lg:px-8">
                    <!-- карточка 1 -->
                    <div class="border-2 border-solid border-color-gray text-center py-20 px-5 rounded-2xl cursor-pointer hover:bg-color-primary-dark ease-in duration-200">
                        <div class="bg-color-secondary inline-block rounded-2xl py-5 px-6">
                            <i class="fa-solid fa-calendar-days"></i>
                        </div>
                        <h3 class="text-xl font-bold py-4">Планирование</h3>
                        <p class="leading-relaxed">Устанавливайте лимиты на расходы, ставьте цели, добавляйте разные счета</p>
                    </div>
                    <!-- карточка 2 -->
                    <div class="border-2 border-solid border-color-gray text-center py-20 px-5 rounded-2xl cursor-pointer hover:bg-color-primary-dark ease-in duration-200">
                        <div class="bg-color-secondary inline-block rounded-2xl py-5 px-6">
                            <i class="fa-solid fa-chart-pie"></i>
                        </div>
                        <h3 class="text-xl font-bold py-4">Подробные отчёты</h3>
                        <p class="leading-relaxed">Смотрите различную статистику доходов и расходов в диаграммах</p>
                    </div>
                    <!-- карточка 3 -->
                    <div class="border-2 border-solid border-color-gray text-center py-20 px-5 rounded-2xl cursor-pointer hover:bg-color-primary-dark ease-in duration-200">
                        <div class="bg-color-secondary inline-block rounded-2xl py-5 px-6">
                            <i class="fa-solid fa-phone"></i>
                        </div>
                        <h3 class="text-xl font-bold py-4">Поддержка 24/7</h3>
                        <p class="leading-relaxed">Если что-то пойдёт не так и вам нужна будет помощь, то мы всегда на связи</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <script src="main.js"></script>
</body>
</html>
    
